html{
    font-size: 15px;
    body{
        width: 100vw;
        height: 100vh;
        display: grid;
        justify-content: center;
        align-content: center;
        background-color:#8e44ad ;
        main{
            width: 600px;
            height: 600px;
            // background-color: green;
            transform-style: preserve-3d;
            transform-origin: center center -150px;
            position: relative;
            transition: 3s;
            div{
                width: 300px;
                height: 300px;
                background-color: hotpink;
                transform-origin: center center -150px;
                position: absolute;
                opacity: 0.8;
                &:nth-child(1){
                    width: 600px;
                    height: 300px;
                }
                &:nth-child(2){
                    width: 300px;
                    height: 300px;
                    margin-left: 300px;
                    transform: rotateY(90deg);
                    
                }
                &:nth-child(3){
                    width: 600px;
                    height: 300px;
                   
                    transform: rotateY(180deg);
                    
                }
                &:nth-child(4){
                    width: 300px;
                    height: 300px;
                   
                    transform: rotateY(270deg);
                    
                }
                &:nth-child(5){
                    width: 600px;
                    height: 300px;
                   
                    transform: rotateX(90deg);
                    
                }
                &:nth-child(6){
                    width: 600px;
                    height: 300px;
                   
                    transform: rotateX(-90deg);
                    
                }
                img{
                    width: 100%;
                    height: 100%;
                    object-fit:cover
                }
            }
            &:hover{
                transform: perspective(900px) rotateY(120deg) rotateX(120deg);
            }
            
        }
    }
    
}